<template>
  <div>
    <el-button class="w-100" :size="size" plain @click="toSelect">
      {{ value == null || value.macCode === '' ? buttonName : value.macCode }} <i class="el-icon-edit"></i>
    </el-button>
    <el-dialog :title="buttonName" append-to-body :visible.sync="showFlag" width="1000px">
      <div class="flex-center m-b-10">
        <div class="flex-start">
          <span class="m-r-10">地址</span>
          <app-address style="height: 32px;" @change="addressChange"/>
        </div>
        <div class="flex-start">
          <el-input size="small" class="m-r-10" placeholder="输入关键字"
                    style="width: 300px;" v-model="search.queryStr"/>
          <el-button size="small" icon="el-icon-search" type="primary" @click="query">查询</el-button>
        </div>
      </div>
      <el-table class="my-table" :data="data" v-loading="loading" style="width: 100%" border height="350"
                :header-cell-style="{background:'#eee',color:'#000'}">
        <el-table-column label="" width="40">
          <template v-slot="scope">
            <el-radio :label="scope.row.id" v-model="valueSelectId" class="m-l-5">{{ '' }}</el-radio>
          </template>
        </el-table-column>
        <el-table-column type="index" align="center" label="序号" width="60"/>
        <el-table-column label="加注机编号" width="180">
          <template v-slot="scope">{{ scope.row.macCode | defaultValue }}</template>
        </el-table-column>
        <el-table-column label="加注站名称">
          <template v-slot="scope">{{ scope.row.siteName | defaultValue }}</template>
        </el-table-column>
        <el-table-column prop="ureaPrice" label="销售单价(元)" width="180"/>
      </el-table>
      <app-pagination ref="paginationRef" :total="total" :page-size="page.size" class="m-t-20" @change="pageChange"/>
      <div class="dividing-line m-t-20 m-b-20"></div>
      <div class="flex-end">
        <el-button type="primary" plain size="small" @click="showFlag=false">取消</el-button>
        <el-button type="primary" size="small" @click="confirmAdd">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import AppPagination from "@/components/business/app-pagination";
import {equals, getRecords, getTotal, isNotNull, isNull, isTrue, msgError} from "@/util/common-util";
import {getPage} from "@/api/business/filling-machine";
import AppDictSelect from "@/components/business/app-dict-select";
import AppAddress from "@/components/business/app-address";

export default {
  name: "select-filling-machine-single-button",
  components: {AppAddress, AppDictSelect, AppPagination},
  props: {
    buttonName: {
      type: String,
      default: '请点击选择加注机'
    },
    initValue: {
      type: Object,
      default: null
    },
    isCluster: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'small'
    }
  },
  data() {
    return {
      showFlag: false,
      data: [],
      loading: false,
      search: {
        districtCode: null,
        cityCode: null,
        provinceCode: null,
        queryStr: ''
      },
      page: {
        size: 10,
        current: 1
      },
      total: 0,
      value: null,
      valueSelectId: null
    }
  },
  created() {
    if (isNotNull(this.initValue)) {
      this.value = this.initValue
    }
  },
  methods: {
    pageChange(_page) {
      this.page = _page
      this.query()
    },
    addressChange(region) {
      this.search.provinceCode = region.province
      this.search.cityCode = region.city
      this.search.districtCode = region.area
      this.query()
    },
    query() {
      this.loading = true
      if (isTrue(this.isCluster)) {
        this.search.isClusterSelectFillMachine = true
      }
      getPage(this.page, this.search).then(res => {
        this.data = getRecords(res)
        if (isNotNull(this.value)) {
          for (const item of this.data) {
            if (item.id == this.value.id) {
              this.valueSelectId = item.id
              break
            }
          }
        }
        this.total = getTotal(res)
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    toSelect() {
      this.showFlag = true
      this.query()
    },
    confirmAdd() {
      if (isNull(this.valueSelectId)) return msgError("请选择一个")
      let flag = true
      for (const item of this.data) {
        if (equals(item.id, this.valueSelectId)) {
          this.value = {
            id: item.id,
            macCode: item.macCode
          }
          this.$emit("change", this.value)
          flag = false
          this.showFlag = false
          break
        }
      }
      if (flag) msgError("请选择一个")
    }
  }
}
</script>

<style lang="scss" scoped>
.my-table {
  /deep/ .el-button--small {
    padding: 0 5px !important;
    font-size: 14px !important;
  }

  /deep/ td {
    padding: 8px 0 !important;
  }
}
</style>
